<template>
  <el-dialog :visible.sync="remarkData.dialog" :before-close="cancleRemarkDialog" size="small">
    <div :class="$style.remarkBox">
      <div :class="$style.title">客户意向</div>
      <div :class="$style.detail">
        <div :class="$style.tit">客户状态</div>
        <el-radio-group v-model="remarkData.situation.value" style="font-size:16px;">
          <el-collapse :value="remarkData.situation.options[0].title" accordion>
            <el-collapse-item v-for="item in remarkData.situation.options" :key="item.title" :title="item.title" :name="item.title">
              <el-radio style="margin-top:20px;margin-left:20px;" :label="sitem.value" v-for="(sitem,index) in item.arr" :key="index">{{sitem.label}}</el-radio>
            </el-collapse-item>
          </el-collapse>
        </el-radio-group>
      </div>
      <div :class="$style.detail">
        <div :class="$style.tit">客户性格</div>
        <el-radio-group v-model="remarkData.character.value">
          <el-radio style="margin-top:20px;margin-left:20px;" :label="item.value" v-for="(item,index) in remarkData.character.options" :key="index">{{item.label}}</el-radio>
        </el-radio-group>
      </div>
      <div :class="$style.title">客户情况</div>
      <div :class="$style.detail">
        <div :class="$style.tit">客户偏好</div>
        <el-checkbox-group v-model="remarkData.preference.value">
          <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.preference.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div :class="$style.detail">
        <div :class="$style.tit">客户反馈</div>
        <el-checkbox-group v-model="remarkData.feedback.value">
          <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.feedback.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div :class="$style.detail">
        <div :class="$style.tit">了解网贷平台的途径</div>
        <el-checkbox-group v-model="remarkData.channel.value">
          <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.channel.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div :class="$style.detail">
        <div :class="$style.tit">流失原因</div>
        <el-checkbox-group v-model="remarkData.reason.value">
          <el-checkbox style="margin-top:20px;margin-left:20px;" v-for="(item,index) in remarkData.reason.options" :label="item.value" :key="index">{{item.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div :class="$style.title">备注</div>
      <div :class="$style.detail">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" :maxlength="200" v-model="remarkData.remarkCont">
        </el-input>
      </div>
      <div :class="$style.title">维护历史</div>
      <div :class="$style.detail" style="height:50px;overflow-y:scroll;border-bottom: 1px solid #dddfe6">
        <div :class="$style.history" v-for="(item,index) in remarkData.history" :key="index">({{item.tDate}}){{item.cKfmc || '客服'}}:{{item.cNr}}</div>
      </div>
      <div style="margin: 20px 0;text-align:center;">
        <el-button type="primary" @click="saveRemarkDialog">提交</el-button>
        <el-button @click="cancleRemarkDialog">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      remarkData: {
        id: null,
        dialog: false,
        situation: {
          value: '',
          options: [
            {
              title: '未接通状态',
              arr: [
                {
                  value: '未接通',
                  label: '未接通'
                },
                {
                  value: '暂时无法接通/不在服务区',
                  label: '暂时无法接通/不在服务区'
                },
                {
                  value: '无人接听',
                  label: '无人接听'
                },
                {
                  value: '电话占线',
                  label: '电话占线'
                },
                {
                  value: '关机',
                  label: '关机'
                },
                {
                  value: '拒接',
                  label: '拒接'
                },
                {
                  value: '呼叫限制',
                  label: '呼叫限制'
                }, {
                  value: '停机',
                  label: '停机'
                }, {
                  value: '未开通语音通话功能',
                  label: '未开通语音通话功能'
                }, {
                  value: '号码已过期',
                  label: '号码已过期'
                }
              ]
            },
            {
              title: '接通状态',
              arr: [
                {
                  value: '意向不明确',
                  label: '意向不明确'
                },
                {
                  value: '暂时不需要',
                  label: '暂时不需要'
                },
                {
                  value: '在忙自己看或了解',
                  label: '在忙自己看或了解'
                },
                {
                  value: '信号不好',
                  label: '信号不好'
                },
                {
                  value: '通话背景声噪',
                  label: '通话背景声噪'
                },
                {
                  value: '有意向',
                  label: '有意向'
                },
                {
                  value: '已充值或投资50以上',
                  label: '已充值或投资50以上'
                },
                {
                  value: '预约待回访',
                  label: '预约待回访'
                },
                {
                  value: '还没打过电话',
                  label: '还没打过电话'
                },
                {
                  value: '非本人注册',
                  label: '非本人注册'
                },
                {
                  value: '刷单或羊毛用户',
                  label: '刷单或羊毛用户'
                },
                {
                  value: '接听后挂断',
                  label: '接听后挂断'
                },
                {
                  value: '表示没资金或只是注册看看',
                  label: '表示没资金或只是注册看看'
                },
                {
                  value: '在忙不接受预约回访',
                  label: '在忙不接受预约回访'
                },
                {
                  value: '借款人',
                  label: '借款人'
                },
                {
                  value: '朋友介绍',
                  label: '朋友介绍'
                },
                {
                  value: '明确表示准备投资',
                  label: '明确表示准备投资'
                },
                {
                  value: '有其他平台的投资经历',
                  label: '有其他平台的投资经历'
                },
                {
                  value: '对网站红包活动感兴趣，而且提问',
                  label: '对网站红包活动感兴趣，而且提问'
                },
                {
                  value: '已绑定银行卡或绑卡失败',
                  label: '已绑定银行卡或绑卡失败'
                },
                {
                  value: '用户讲方言',
                  label: '用户讲方言'
                }
              ]
            }
          ]
        },
        character: {
          value: '',
          options: [{
            value: '平和友善',
            label: '平和友善'
          }, {
            value: '中性',
            label: '中性'
          }, {
            value: '冷淡',
            label: '冷淡'
          }, {
            value: '不友好',
            label: '不友好'
          }]
        },
        preference: {
          value: [],
          options: [{
            value: '平台安全（是否存管、托管）',
            label: '平台安全（是否存管、托管）'
          }, {
            value: '喜欢短期标',
            label: '喜欢短期标'
          }, {
            value: '喜欢长期标',
            label: '喜欢长期标'
          }, {
            value: '对赚取财币感兴趣',
            label: '对赚取财币感兴趣'
          }, {
            value: '关注借款项目安全',
            label: '关注借款项目安全'
          }, {
            value: '手机操作',
            label: '手机操作'
          }, {
            value: '电脑操作',
            label: '电脑操作'
          }]
        },
        feedback: {
          value: [],
          options: [{
            value: '非本人操作',
            label: '非本人操作'
          }, {
            value: '不会操作',
            label: '不会操作'
          }, {
            value: '操作太复杂',
            label: '操作太复杂'
          }, {
            value: '觉得利率有点低',
            label: '觉得利率有点低'
          }, {
            value: '在APP上操作遇到bug问题',
            label: '在APP上操作遇到bug问题'
          }, {
            value: '债权变现不够灵活，流动性不足',
            label: '债权变现不够灵活，流动性不足'
          }]
        },
        channel: {
          value: [],
          options: [{
            value: '亲戚朋友介绍',
            label: '亲戚朋友介绍'
          }, {
            value: '百度等搜索引擎',
            label: '百度等搜索引擎'
          }, {
            value: '电视/广播/报纸',
            label: '电视/广播/报纸'
          }, {
            value: '社交论坛',
            label: '社交论坛'
          }, {
            value: '户外广告',
            label: '户外广告'
          }, {
            value: '其他',
            label: '其他'
          }]
        },
        reason: {
          value: [''],
          options: [{
            value: '利率太低',
            label: '利率太低'
          }, {
            value: '行业动荡，跑路太多',
            label: '行业动荡，跑路太多'
          }, {
            value: '不懂P2P理财',
            label: '不懂P2P理财'
          }, {
            value: '担心平台安全',
            label: '担心平台安全'
          }, {
            value: '不想投资了',
            label: '不想投资了'
          }, {
            value: '急用资金周转',
            label: '急用资金周转'
          }, {
            value: '投资到其他平台了',
            label: '投资到其他平台了'
          }, {
            value: '投不上标',
            label: '投不上标'
          }]
        },
        remarkCont: '',
        history: [
        ],
      },
    }
  },
  computed:{
    userInfo () {
      return this.$store.getters.getUserInfo
    },
  },
  methods: {
    remarkDialog (id) {
      this.remarkData.dialog = true;
      this.remarkData.id=id;
      this.remarkData.remarkCont = "";
      this.$get(this,{api:'manage/loadState.do',data: {
          fuid:id
      }}).then(({data})=>{

        if (data.state === 0) {
          //客户状态
          this.remarkData.situation.value = data.content.m1 ? String(data.content.m1.cKfState) : '';
          //客户性格
          this.remarkData.character.value = data.content.m1 && data.content.m1.cKhgx;
          // 客户偏好
           this.remarkData.preference.value = data.content.m1 ? data.content.m1.cKhph.split(',') : [];
          //客户反馈
          this.remarkData.feedback.value = data.content.m1 ? data.content.m1.cKhfk.split(',') : [];
          //了解网贷平台的途径
          this.remarkData.channel.value = data.content.m1 ? data.content.m1.cLjtj.split(',') : [];
          //流失原因
          this.remarkData.reason.value = data.content.m1 ? data.content.m1.cLsyy.split(',') : [];   // 对m2添加容错
          //流失原因
          this.remarkData.remarkCont = data.content.m2 && data.content.m2.length > 0 && data.content.m2[0].cNr ? data.content.m2[0].cNr : '';   // 对m2添加容错
          // 历史记录
          this.remarkData.history = data.content.m2 || [];
        } else {
          this.$toast({
            message: data.message
          })
        }
      }).catch(e=>{
        console.log('manage/loadState:', e)
      })
    },
    // 取消备注弹窗
    cancleRemarkDialog() {
      this.remarkData.value = '';
      this.remarkData.dialog = !this.remarkData.dialog;
    },
    // 保存备注
    saveRemarkDialog() {
      this.$get(this,{api:'manage/saveState.do',data: {
          fuid:this.remarkData.id,
          fKfid: this.userInfo.id,
          cKfState: this.remarkData.situation.value,
          cQQ: this.userInfo.cQQ,
          cKhph: this.remarkData.preference && this.remarkData.preference.value.join(','),
          cKhgx: this.remarkData.character.value,
          cKhfk: this.remarkData.feedback && this.remarkData.feedback.value.join(','),
          cLjtj: this.remarkData.channel.value && this.remarkData.channel.value.join(','),
          cNr: this.remarkData.remarkCont,
          cLsyy: this.remarkData.reason.value && this.remarkData.reason.value.join(','),
          groupId: this.userInfo.userGroupId,
      }}).then(({data})=>{
        if (data.state === 0) {
          // this.handleCurrentChange(this.currentPage);
          this.$message({
            message: '提交成功！',
            type: 'success'
          })
          this.remarkData.dialog= false;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
  }
}
</script>


<style lang="scss" module>
.remarkBox {
  .title {
    width: 100%;
    border-bottom: 1px solid #dddfe6;
    text-align: center;
    font-size: 24px;
    height: 80px;
    line-height: 80px;
  }
  .detail {
    padding: 20px;
  }
  .history {
    margin-top: 20px;
  }
}

.tit {
  font-weight: 600;
}
</style>
